<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table-locale-all.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../static/css/global.css"  media="all">
</head>
<body>
<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <ul class="layui-nav fly-nav" style="float:right">
            <li class="layui-nav-item">
                <a href="javascript:;" th:text="${username}">hello，yhx</a>
            </li>
            <li class="layui-nav-item">
                <a th:href="@{/index}">问答</a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/questionlist}">列表</a></li>
            <li class="layui-nav-item">
                <a th:href="@{/logout}">登出</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <!--table table-striped-->
    <table id="table"
            data-toggle="table" class="table table-striped"
           data-locale="zh-CN"  width="800"
           style="table-layout:fixed;"
          >
        <thead>
        <tr>
            <th data-filed="id">id</th>
            <th data-filed="question">question</th>
            <th data-filed="answer">answer</th>

        </tr>
        </thead>
        <tbody>
        <tr th:each="question:${pageInfo.list}" >
            <td th:text="${question.id}"></td>
            <td><a  th:text="${question.question}" th:href="@{${'question'}(id=${question.id})}"></a></td>
            <td th:text="${question.answer}" width="400" class="layui-elip"></td>
        </tr>
        </tbody>
    </table>

    <script>
  var $table = $('#table')
  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:void(0)" title="Like">',
      '<i class="fa fa-heart"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }
  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    }
  }
</script>
    <nav>
        <ul class="pagination">
            <li>
                <a th:href="@{${'questionlist'}(pageNum=1,pageSize=${pageSize})}">
                    <span aria-hidden="true">&lAarr;</span>
                </a>
            </li>
            <li>
                <a th:if="${not isFirstPage}" th:href="@{${'questionlist'}(pageNum=${pageNum-1},pageSize=${pageSize})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                <a th:if="${isFirstPage}" href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li th:each="pageNo : ${#numbers.sequence(1, totalPages)}" th:class="${pageNum eq pageNo}?'active'">
                <a th:if="${pageNum eq pageNo}" href="javascript:void(0);" >
                    <span th:text="${pageNo}"></span>
                </a>

                <!--a th:if="${not (pageNum eq pageNo)}" th:href="@{${'questionlist'}(pageNum=${pageNo},pageSize=${pageSize})}">
                    <span th:text="${pageNo}"></span>
                </a-->
                <a th:if="${(pageNum-pageNo)<=5 and (pageNo-pageNum)<=4 and not (pageNum eq pageNo)}" th:href="@{${'questionlist'}(pageNum=${pageNo},pageSize=${pageSize})}">
                    <span th:text="${pageNo}"></span>
                </a>
            </li>

            <li>
                <a th:if="${not isLastPage}" th:href="@{${'questionlist'}(pageNum=${pageNum+1},pageSize=${pageSize})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                <a th:if="${isLastPage}" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li>
                <a th:href="@{${'questionlist'}(pageNum=${totalPages},pageSize=${pageSize})}">
                    <span aria-hidden="true">&rAarr;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</body>

<!--script>
  $(function() {
    $('#table').bootstrapTable({
      formatSearch: function () {
        return 'Search Question'
      }
    })
  })

  function customSearch(data, text) {
    return data.filter(function (row) {
      return row.question.indexOf(text) > -1
    })
  }
</script-->
</html>